<template>
    <div class="layout">
        <Layout>
            <Header>
                <Menu mode="horizontal" theme="dark" active-name="1">
                    <div class="layout-logo">
                        <router-link to="/">
                            <img src="../../public/img/logo.png" width="100" style="margin-left:-20px">
                        </router-link>
                    </div>
                    <div class="layout-nav">
                        <MenuItem name="1">
                            <Dropdown trigger="click" style="margin-left:20px">
                                {{userInfo.username}}
                                <Icon type="ios-arrow-down"></Icon>
                                <DropdownMenu slot="list">
                                    <DropdownItem @click.native="change = true">修改密码</DropdownItem>
                                    <DropdownItem @click.native="out">退出</DropdownItem>
                                </DropdownMenu>
                            </Dropdown>
                        </MenuItem>
                        <MenuItem name="2">
                            <Avatar :src="userInfo.head_url"></Avatar>
                        </MenuItem>
                    </div>
                </Menu>
            </Header>
            <Layout>
                <Sider hide-trigger :style="{background: '#fff'}">
                    <Menu active-name="1" theme="light" width="auto" :open-names="['1']">
                        <MenuItem name="1" to="/">
                            <Icon type="ios-home" />
                            首页
                        </MenuItem>
                        <MenuItem name="2" to="/user">
                            <Icon type="ios-people" />
                            用户
                        </MenuItem>
                        <MenuItem name="3" to="/category">
                            <Icon type="md-share" />
                            分类
                        </MenuItem>
                        <MenuItem name="4" to="/goods">
                            <Icon type="md-shirt" />
                            商品
                        </MenuItem> 
                        <MenuItem name="5" to="/comment">
                            <Icon type="md-reorder" />
                            评论
                        </MenuItem>                           
                        <MenuItem name="6" to="/order">
                            <Icon type="ios-list-box" />
                            订单
                        </MenuItem>   
                        <MenuItem name="7" to="/advert">
                            <Icon type="md-images" />
                            广告
                        </MenuItem>                           
                        <MenuItem name="8" to="/system">
                            <Icon type="md-settings" />
                            系统
                        </MenuItem>   
                    </Menu>
                </Sider>
                <Layout :style="{padding: '0 24px 24px'}">
                    <Content :style="{padding: '24px',margin:'20px', minHeight: '280px', background: '#fff'}">
                        <router-view></router-view>
                    </Content>
                    <Footer class="layout-footer-center">2019 &copy; 云知梦后台</Footer>
                </Layout>
            </Layout>
        </Layout>

        <Modal title="修改密码" @on-ok="changePass" v-model="change">
            <Form :model="form">
                <FormItem>
                    <Input type="password" v-model="form.oldpassword" placeholder="请输入旧密码">
                        <Icon type="ios-lock-outline" slot="prepend"></Icon>
                    </Input>
                </FormItem>
                <FormItem>
                    <Input type="password" v-model="form.password" placeholder="请输入新密码">
                        <Icon type="ios-lock-outline" slot="prepend"></Icon>
                    </Input>
                </FormItem>
                <FormItem>
                    <Input type="password" v-model="form.repassword" placeholder="请确认密码">
                        <Icon type="ios-lock-outline" slot="prepend"></Icon>
                    </Input>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                change:false,
                header:{
                    title:'',
                    logo:'',
                    keywords:'',
                    description:'',
                },
                userInfo:{
                    id:0,
                    username:'',
                    head_url:'',
                    login_time:'',
                },
                form:{
                    oldpassword:'',
                    password:'',
                    repassword:'',
                },
            }
        },

        mounted() {
            this.getInfo();
            this.getHeader();
        },

        methods: {
            async getHeader(){
                let res = await this.$api.system.getHeader();
                if (res) {
                    this.header = res
                }
            },

            async getInfo(){
                let res = await this.$api.common.loginInfo();
                if (res) {
                    this.$Message.success('登录成功');
                    this.userInfo = res;
                }
            },

            async changePass(){
                await this.$api.common.changePass(this.form);
                this.clear();
            },

            async out(){
                await this.$api.common.out();
            },
            clear(){
                this.form = {};
            },
        },

        metaInfo(){
            return {
                title:this.header.title,
                meta:[
                    {
                        name:'keywords',
                        content:this.header.keywords,
                    },
                    {
                        name:'description',
                        content:this.header.description,
                    },
                ],
                link:[
                    {
                        href:this.header.logo,
                        rel:'icon',
                        type:'image/x-icon'
                    }
                ],
            }
        },
    }
</script>

<style lang="less" scoped>
.layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;

    .layout-logo{
        width: 100px;
        height: 30px;
        position: relative;
        float: left;
        top: 10px;
        left: 20px;
    }

    .layout-nav{
        width: 420px;
        margin: 0 auto;
        margin-right: 20px;
    }
    .layout-footer-center{
        text-align: center;
    }
}

</style>